<template>
  <gui-page :custom-header="true" :full-page="true" :status-bar-class="['gui-bg-white']">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">登录/注册</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-bg-white gui-flex gui-flex1 gui-column">
        <view style="padding: 50rpx">
          <view class="gui-flex gui-row gui-justify-content-center">
            <gui-image src="/static/logo.svg" />
          </view>
          <view style="margin-top: 80rpx">
            <form @submit="submit">
              <view>
                <text class="gui-text-small gui-color-gray">账户</text>
              </view>
              <view class="gui-border-b">
                <input class="gui-form-input" name="account" placeholder="登录账户" type="text" />
              </view>
              <view class="gui-margin-top">
                <text class="gui-text-small gui-color-gray">密码</text>
              </view>
              <view class="gui-border-b">
                <input class="gui-form-input" name="pwd" placeholder="密码" type="password" />
              </view>
              <!--              <view class="gui-margin-top gui-flex gui-rows gui-space-between" hover-class="gui-tap">-->
              <!--                <text class="gui-text gui-color-gray gui-block" @tap="forgetPwd">忘记密码</text>-->
              <!--                <text class="gui-text gui-color-gray gui-block gui-text-right" @tap="loginbymsg">短信登录</text>-->
              <!--              </view>-->
              <view style="margin-top: 38rpx">
                <button class="gui-button gui-bg-primary gui-noborder" formType="submit" style="border-radius: 50rpx" type="default">
                  <text class="gui-color-white gui-button-text">登 录</text>
                </button>
              </view>
            </form>
          </view>

          <!--          <view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top: 80rpx">-->
          <!--            <view class="gui-title-line" />-->
          <!--            <text class="gui-primary-color gui-h6" style="padding-left: 50rpx; padding-right: 50rpx">其他方式登录</text>-->
          <!--            <view class="gui-title-line" />-->
          <!--          </view>-->
          <!--          <view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-margin-top">-->
          <!--            <view class="other-login-icons" hover-class="gui-tap">-->
          <!--              <text class="other-login-icons gui-icons gui-color-gray">&#xe63e;</text>-->
          <!--            </view>-->
          <!--            <view class="other-login-icons" hover-class="gui-tap">-->
          <!--              <text class="other-login-icons gui-icons gui-color-gray">&#xe6cd;</text>-->
          <!--            </view>-->
          <!--          </view>-->
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import graceChecker from '@/Grace6/js/checker.js'
const forgetPwd = () => {
  console.log('请自行完善代码')
}
const loginbymsg = () => {
  console.log('请自行完善代码')
}
const submit = (e: any) => {
  // 表单数据
  const formData = e.detail.value
  console.log(formData)
  // 利用 graceUI 的表单验证工具进行验证
  //定义表单规则
  const rule = [
    { name: 'account', checkType: 'string', checkRule: '5,50', errorMsg: '登录账户输入有误' },
    { name: 'pwd', checkType: 'string', checkRule: '6,100', errorMsg: '登录密码至少6个字符' },
  ]
  const checkRes = graceChecker.check(formData, rule)
  if (checkRes) {
    uni.showToast({ title: '验证通过!', icon: 'none' })
    // 根据项目需要完成数据验证工作
  } else {
    uni.showToast({ title: graceChecker.error, icon: 'none' })
  }
}
</script>
<style scoped>
.login-logo {
  width: 180rpx;
  height: 180rpx;
  font-size: 80rpx;
  text-align: center;
  line-height: 120rpx;
  padding: 30rpx;
  border-radius: 18rpx;
}
.other-login-icons {
  width: 88rpx;
  height: 88rpx;
  text-align: center;
  font-size: 70rpx;
  margin: 20rpx;
}
</style>
